<template>
  <div class="HomeView">
    <el-container style="height: 100%;">
      <el-header >
        <div class="headers" >
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
          > 
            <el-menu-item index="0">流星网盘</el-menu-item>
            <div class="flex-grow" />
            <el-menu-item index="1">我的云盘</el-menu-item>
            <el-menu-item index="2" disabled>我的分享</el-menu-item>
            <el-menu-item index="3" disabled>广场</el-menu-item>
            <el-menu-item index="4" disabled>公共空间</el-menu-item>
            <el-menu-item index="5">关于本站</el-menu-item>
            <client-only> 
              <el-avatar class="menu_center"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              /></client-only>
            <el-button class="exit menu_center" @click="exit">退出登陆</el-button>
          </el-menu>
        
          <!-- <el-button class="exit" @click="exit">退出登陆</el-button> -->
        </div>
      </el-header>
      <el-main>
        <div class="space">
          <my-space></my-space>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import MySpace from "@/components/MySpace/MySpace.vue"
import router from "@/router";

// 退出登录
const exit =()=> {
  $cookies.remove("Authorization")
  router.go(0)
}
</script>

<style scoped>
.HomeView{
  height: 100%;
  width: 100%;
  background-color: #f4f4f5;
}
.space{
  margin-top: 10px;
  min-width: 850px;
  width: 80%;
  margin: 10px auto;
  
  
}
.headers{
  
  background-color:white ;
  height: 100%;
  /* margin-right: 10%;
  float:right; */
}
.el-header{
  --el-header-height:auto;
}
.el-menu{
  box-shadow: 0px 8px 16px 8px  #e9e9eb;
  border-radius: 8px;
}
.el-main{
  height: 100%;
  width:100%;
  padding: 10px 20px;
}

/* 导航栏左右布局 */
.flex-grow {
  flex-grow: 0.5;
}
/* 设置menu-item的自定义居中 */
.menu_center{
  transform: translateY(35%);
}

/* 去掉el-menu横线 */
:deep(.el-menu--horizontal) {
  border-bottom: none;
  text-decoration: none;
}

</style>
